<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
 xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>栏目管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" type="image/png" th:href="@{/static/image/icon.ico}"/>
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<div class="layui-layout layui-layout-admin">
	<div th:include="common/menu.html"></div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<blockquote class="layui-elem-quote">
		栏目管理
		</blockquote>
		<script type="text/html" id="addMenu">
  			<a class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle">添加</i></a>
		</script>
    	<table class="layui-hide" id="table_lay" lay-filter="table_lay"></table>
    	<script type="text/html" id="barDemo">
           <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
           <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
    </div>
  </div>
</div> 
<script th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/layui/lay/modules/table.js}"></script>
<script>
layui.config({
    base : '../static/layui/'
}).extend({
    treetable : 'treetable-lay/treetable'
}).use(['treetable', 'table', 'layer','element'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var element = layui.element //元素操作
    var treetable = layui.treetable;
    var $ = layui.jquery;
    //渲染表格
        layer.load(2);  //加载层
        treetable.render({
            height: 'full-160',
            id:'table_lay',
            treeColIndex: 1,	//树形图标显示在第几列
            treeSpid: 1,		//最上级的父级id
            treeIdName: 'id',	//id字段的名称
            treePidName: 'parentId',	//父级节点字段
            treeDefaultClose: false,	//是否默认折叠
            treeLinkage: false,		//父级展开时是否自动展开所有子级
            elem: '#table_lay',	//表格id
            url: '/user/sysMenu/list.html',
            toolbar: '#addMenu',
            cols: [ 
            	[
            		{type: 'numbers', title: '编号'}
                    ,{field: 'menuName', title: '栏目名称' }
                    ,{field: 'menuIcon',title:'栏目图标',
                    	templet:function(d){
                    		console.info("-"+d.menuIcon+"-");
                    		if(d.menuIcon!=''){
                    			return "<i class='layui-icon "+d.menuIcon+"'> </i>";
                    		}else{
                    			return '';
                    		}
                    	}
                    }
                    ,{field: 'permission', title: '权限', sort: true, totalRow: true}
                    ,{field: 'menuAddress', title: '栏目地址',  sort: true}
                    ,{field: 'menuStatus', title: '栏目状态', 
                    	templet: function(d){
                    		if(d.menuStatus==0){
                    			return '显示';
                    		}else{
                    			return '隐藏';
                    		}
                        }
                    	}
                    ,{field: 'sort', title: '排序'}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ] 
            	],
            //数据渲染完的回调
            done: function () {
                //关闭加载
                layer.closeAll('loading');
            }
        })
        
      //监听行单击事件（双击事件为：rowDouble）
      table.on('rowDouble(table_lay)', function(obj){
        var data = obj.data ;
        editTable(data.id);
        //标注选中样式
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
      });   
        
	//监听行工具事件
	  table.on('tool(table_lay)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	     if(layEvent === 'del'){
	      layer.confirm('要删除此栏目么', function(index){
	         layer.close(index);
	         //向服务端发送删除指令
	         $.ajax({
			  url:"/user/sysMenu/delete/{id}.html",
			  type:"POST",
		  	  data:{id:data.id},
		  	  success:function(result){
		  		  console.info(result);
		  		  if(result.code==200){ 
		  			 obj.del();
		  			 treetable.render();
		  		  }else{
		  			 layer.msg(result.message, {icon:result.icon});}
		  		  }
		    })
	      });
	    }else if(layEvent === 'edit'){
	    	editTable(data.id);
	    }
	  });
	
	function editTable(data){
		layer.open({
    	      type: 2,
    	      title: '',
    	      maxmin: true,
    	      shadeClose: true, //点击遮罩关闭层
    	      area : ['600px' , '680px'],
    	      content: '/user/sysMenu/edit.html?id='+data,  //加上选中行的ID值
    	      end:function(){
    	    	  treetable.render();
      	      }
    	 }); 
	}
	
	table.on('toolbar', function(obj){
		editTable("");
	});
});
</script>
</body>
</html>